'use client';

import { Avatar, Breadcrumb, Button, Layout, Nav } from '@douyinfe/semi-ui';
import { Icon } from '@iconify/react';
import Image from 'next/image';
import Link from 'next/link';

interface Props {
  children: React.ReactNode;
}

export default function adminLayout({ children }: Props) {
  return (
    <Layout
      style={{ border: '1px solid var(--semi-color-border)', height: '100vh' }}
    >
      <Layout.Sider
        style={{
          backgroundColor: 'var(--semi-color-bg-1)',
        }}
      >
        <Nav
          defaultSelectedKeys={['plan']}
          style={{
            maxWidth: 240,
            height: '100%',
            backgroundColor: '#F1F2F4',
            color: 'var(--semi-color-text-1)',
          }}
          renderWrapper={({ itemElement, props }) => {
            const routerMap = {
              home: '/',
              plan: '/admin/plan',
              history: '/admin/history',
              flow: '/admin/flow',
              template: '/admin/template',
              setting: '/admin/setting',
            };
            return (
              <Link
                href={routerMap[props.itemKey as keyof typeof routerMap]}
                className="mb-[4px] block"
              >
                {itemElement}
              </Link>
            );
          }}
          items={[
            {
              itemKey: 'home',
              text: '首页',
              icon: <Icon icon="icon-park-outline:system" fontSize={16}></Icon>,
              style: {
                color: 'var(--semi-color-text-1)',
                height: '42px',
                display: 'flex',
                alignItems: 'center',
                borderRadius: 'var(--semi-border-radius-large)',
              },
            },
            {
              itemKey: 'plan',
              text: '制作方案',
              icon: <Icon icon="hugeicons:floor-plan" fontSize={16}></Icon>,
              style: {
                color: 'var(--semi-color-text-1)',
                height: '42px',
                display: 'flex',
                alignItems: 'center',
                borderRadius: 'var(--semi-border-radius-large)',
              },
            },
            {
              itemKey: 'history',
              text: '我的方案',
              icon: (
                <Icon icon="solar:history-3-bold-duotone" fontSize={16}></Icon>
              ),
              style: {
                color: 'var(--semi-color-text-1)',
                height: '42px',
                display: 'flex',
                alignItems: 'center',
                borderRadius: 'var(--semi-border-radius-large)',
              },
            },
            {
              itemKey: 'flow',
              text: '工艺流程管理',
              icon: <Icon icon="fluent:flow-16-regular" fontSize={16}></Icon>,
              style: {
                color: 'var(--semi-color-text-1)',
                height: '42px',
                display: 'flex',
                alignItems: 'center',
                borderRadius: 'var(--semi-border-radius-large)',
              },
            },
            {
              itemKey: 'template',
              text: '模板管理',
              icon: <Icon icon="tabler:template" fontSize={16}></Icon>,
              style: {
                color: 'var(--semi-color-text-1)',
                height: '42px',
                display: 'flex',
                alignItems: 'center',
                borderRadius: 'var(--semi-border-radius-large)',
              },
            },
          ]}
          header={{
            children: (
              <Image
                src="/logo-site.png"
                alt="logo"
                width={100}
                height={36}
              ></Image>
            ),
            style: {
              paddingTop: '8px',
              paddingBottom: '8px',
            },
          }}
          footer={{
            collapseButton: true,
          }}
        ></Nav>
      </Layout.Sider>
      <Layout>
        <Layout.Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
          <Nav
            mode="horizontal"
            header={
              <>
                <div className="relative h-[36px] w-[128px]">
                  <Image src="/logo.png" alt="Logo" fill={true}></Image>
                </div>
              </>
            }
            footer={
              <>
                <Button
                  theme="borderless"
                  icon={<Icon icon="lucide:badge-help" fontSize={22}></Icon>}
                  style={{
                    color: 'var(--semi-color-text-2)',
                    marginRight: '12px',
                  }}
                />
                <Avatar color="orange" size="small">
                  Zu
                </Avatar>
              </>
            }
          ></Nav>
        </Layout.Header>
        <Layout.Content
          style={{
            padding: '24px',
            backgroundColor: 'var(--semi-color-bg-0)',
          }}
        >
          <Breadcrumb
            style={{
              marginBottom: '24px',
            }}
            routes={['制作方案', '详情页']}
          />
          {children}
        </Layout.Content>
        <Layout.Footer
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            padding: '20px',
            color: 'var(--semi-color-text-2)',
            backgroundColor: 'rgba(var(--semi-grey-0), 1)',
          }}
        >
          <span
            style={{
              display: 'flex',
              alignItems: 'center',
            }}
          >
            <span>Copyright © 2025 ByteDance. All Rights Reserved. </span>
          </span>
          <span>
            <span style={{ marginRight: '24px' }}>平台客服</span>
            <span>反馈建议</span>
          </span>
        </Layout.Footer>
      </Layout>
    </Layout>
  );
}
